import React from 'react'
import { Select, Divider, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import "antd/dist/antd.css"
import "./App.css"
const { Option } = Select;

let index = 0;

export default class App extends React.Component {
  state = {
    items: ['jack', 'lucy'],
    name: '',
  };

  onNameChange = event => {
    this.setState({
      name: event.target.value,
    });
  };

  addItem = () => {
    console.log('addItem');
    const { items, name } = this.state;
    this.setState({
      items: [...items, name || `New item ${index++}`],
      name: '',
    });
  };

  render() {
    const { items, name } = this.state;
    return (
      <div style={{ margin: '0 auto', textAlign: 'center' }}>
        <Select
          style={{ width: 240, margin: '0 auto' }}
          placeholder="custom dropdown render"
          dropdownRender={menu => {
            console.log(menu);
            <div>
              {menu}
              <Divider style={{ margin: '4px 0' }} />
              <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
                <Input style={{ flex: 'auto' }} value={name} onChange={this.onNameChange} />
                <a
                  style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
                  onClick={this.addItem}
                >
                  <PlusOutlined /> Add itemasdf
                </a>
              </div>
            </div>
          }}
        >
          {items.map(item => (
            <Option key={item}>{item}</Option>
          ))}
        </Select>
      </div>

    );
  }
}
